<template>
  <div id="headerPage">
    <el-row style="width: 1000px;margin: auto">
      <el-col :span="12">
        <span>欢迎来到彩票网!</span>
        <span v-if='!getNowLogin' style="margin-left: 18px" class="a_box">
          <router-link to="/login">请登录</router-link> <span>|</span>
          <router-link to="/register">立即注册</router-link>
        </span>
        <span v-else style="margin-left: 18px">您好，{{ myInfo.username }}</span>
      </el-col>
      <el-col :span="12" class="a_box">
        <router-link to="/login">代理登录</router-link> |
        <a href="#" @click.stop="playNoMoney">免费试玩</a>|

        <router-link to="/play">玩法</router-link>
        <!--|-->
        <!--<a href="#">在线客服</a>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import md5 from 'md5'
  export default {
    data () {
      return {}
    },
    created () {
      this.judgeStatus()
    },
    methods: {
      judgeStatus () {
        this.$api.getWebConfig({pageSize: 9999}).then(res => {
          if (res.code === '000000') {
            res.data.list.forEach(item => {
              switch (item.code) {
                case 2: if (item.value === '4') {
                  this.$router.push('/error')
                }
              }
            })
          }
        })
      },
      playNoMoney () {
        let params = {
          username: 'usertest',
          password: '123456'
        }
        params.password = md5(params.password)
        this.$api.login(params).then(res => {
          if (res.code === '000000') {
            window.sessionStorage.setItem("loginStatus", true)
            this.$store.commit("c_login", true)
            this.$router.push('/hall/list')
            this.getMyInfo()
          }
        })

      },
      getMyInfo () {
        this.$api.getMyInfo().then(res => {
          if (res.code === '000000') {
            this.$store.commit('myInfo', res.data)
          }
        })
      }
    },
    computed: {
      getNowLogin: function () {
        return this.$store.state.login
      },
      myInfo: function () {
        return this.$store.state.myInfo
      }
    }
  }
</script>

<style lang="less">
  #headerPage {
    height: 34px;
    line-height: 34px;
    background-color: #f5f5f5;
    text-align: left;
    .a_box {
      text-align: right;
      a {
        padding: 0 6px;
      }
    }
    a:hover {
      color: #e43972;
    }
  }
</style>
